<template>
  <div class="auth-container">
    <!-- 左侧品牌区域 -->
    <div class="brand-section">
      <div class="brand-content">
        <h1 class="animate__animated animate__flip">MicroInvest</h1>
        <p class="brand-subtitle">智能投资的未来，从这里开始</p>
        <img src="@/assets/background.webp" alt="Logo" class="brand-logo" />
      </div>
    </div>

    <!-- 右侧验证区域 -->
    <div class="auth-section">
      <div class="auth-content">
        <div class="auth-header">
          <h2>验证邮箱</h2>
          <p class="subtitle">请输入发送到 {{ email }} 的验证码</p>
        </div>

        <div class="verification-content">
          <VerificationCodeInput
            v-model="verificationCode"
            @complete="handleVerificationComplete"
          />
          
          <div class="verification-actions">
            <el-button 
              type="primary" 
              class="resend-btn" 
              :disabled="isCodeSending"
              @click="resendCode"
            >
              <template v-if="isCodeSending">
                <el-icon class="is-loading"><Loading /></el-icon>
                {{ countdown }}s后重新发送
              </template>
              <template v-else>
                重新发送验证码
              </template>
            </el-button>
          </div>
        </div>

        <div class="auth-footer">
          <el-button link type="primary" @click="goBack">返回修改邮箱</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { Loading } from '@element-plus/icons-vue'
import VerificationCodeInput from '@/components/VerificationCodeInput.vue'
import { registerEmailService, registerIdentifyingService } from '@/api/user/users'
import {useTokenStore} from "@/stores/token";
import toast from "@/utils/toast";

const router = useRouter()
const route = useRoute()

const email = ref('')
const verificationCode = ref('')
const isCodeSending = ref(false)
const countdown = ref(60)


onMounted(()=>{
  if(useTokenStore().hasToken){
    router.push('/center/findStock')
  }
});

onMounted(() => {
  isCodeSending.value = true
  startCountdown()
  // 从路由参数获取邮箱
  email.value = route.query.email
  if (!email.value) {
    toast.error('邮箱信息丢失，请重新输入')
    router.push('/user/register')
  }
})

// 处理验证码输入完成
const handleVerificationComplete = async (code) => {
  try {
    const { code: responseCode, message } = await registerIdentifyingService({
      email: email.value,
      code: code
    })

    if (responseCode === 200) {
      toast.success('验证成功')
      // 验证成功后跳转到设置账号页面
      router.push({
        path: '/user/register',
        query: { 
          email: email.value,
          verified: true
        }
      })
    } else {
      toast.error(message || '验证失败')
    }
  } catch (error) {
    toast.error('验证失败，请稍后重试')
  }
}

// 重新发送验证码
const resendCode = async () => {
  if (isCodeSending.value) return

  try {
    isCodeSending.value = true
    const { code, message } = await registerEmailService(email.value)

    if (code === 200) {
      toast.success('验证码已重新发送')
      startCountdown()
    } else {
      toast.error(message || '发送失败')
      isCodeSending.value = false
    }
  } catch (error) {
    toast.error('发送失败，请稍后重试')
    isCodeSending.value = false
  }
}

// 倒计时
const startCountdown = () => {
  countdown.value = 60
  const timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
      isCodeSending.value = false
    }
  }, 1000)
}

// 返回修改邮箱
const goBack = () => {
  router.push('/user/register')
}
</script>

<style lang="scss" scoped>
@import '../../../assets/styles/theme/auth';


.verification-content {
  margin: 30px 0;
  text-align: center;
}

.verification-actions {
  margin-top: 20px;
}

.resend-btn {
  width: 100%;
  background-color: #000;
  border-color: #000;
  color: #fff;
  border-radius: 8px;
  height: 40px;
  font-size: 14px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  .el-icon {
    font-size: 16px;
  }

  &:hover {
    background-color: #333;
    border-color: #333;
  }

  &:disabled {
    background-color: #999;
    border-color: #999;
    color: #fff;
  }
}

.auth-footer {
  margin-top: 20px;
  text-align: center;

  :deep(.el-button) {
    color: #000;
    font-weight: 500;

    &:hover {
      color: #333;
    }
  }
}
</style> 